<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>{$user['title']}</title>

    <!--[if lt IE 9]>
    <script src="https://g.alicdn.com/aliww/ww/json/json.js" charset="utf-8"></script>
    <![endif]-->
    <!-- 自动适配移动端与pc端 -->
    <script src="https://g.alicdn.com/aliww/??h5.openim.sdk/1.0.6/scripts/wsdk.js,h5.openim.kit/0.3.3/scripts/kit.js" charset="utf-8"></script>
    <script src="__CDN__/jquery/2.1.4/jquery-2.1.4.js" type="text/javascript" ></script>
    <style type="text/css">
        .box{
            width:988px;
            margin:0 auto;
            margin-top:10px;
            overflow: hidden;
        }
        .user{
            padding-bottom:10px;
            border-bottom:1px solid #e2e2e2;
            overflow: hidden;
        }
        .user img{
            width:45px;
            height: 45px;
            border-radius: 45px;
            float: left;
        }
        .user .msg-time{
            font-size: 12px;
            color:#00a7d0;
        }
        .user .view{
            font-size: 12px;
            color:#00a7d0;
            float: left;
            margin-left: 10px;
        }
        .msg{
            float: left;
            width:170px;
            margin-left:10px
        }
        .msg div{
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            height: 20px;
            line-height: 20px;
        }
        .left_contact{
            width:260px;
            float: left;
            padding: 5px;
            border:1px solid #e2e2e2;
            height: 678px;
            overflow: scroll;
        }
        .right_main{
            float: left;
        }
        .empty-container{
            height: 698px;
            line-height: 698px;
            width:700px;
            text-align: center;
            font-size:24px;
            color:#ddd;
            border:1px solid #e2e2e2
        }
    </style>
</head>
<body>
<div class="box">
    <div class="left_contact">
        <!-- 用户头像区域 -->
    </div>
    <div class="right_main">
        <!-- 聊天界面 -->
        <div id="j_container"></div>
        <div class="empty-container">
            选择一位好友开始聊天吧~
        </div>
    </div>
</div>


<script>
    function queryUsers() {
        var uid = {$uid};
        $.post("http://api.guannan.itboye.com/public/web.php/Alibaichuan/contact_list?uid="+uid, {},
            function(data,status){
                if(status == 'success'){
                    $('.left_contact').empty();
                    for(var i = 0;i < data.data.list.length;i++){

                        $('.left_contact').append(
                            '<div class="user" data-uid='+data.data.list[i].uid+' data-openid='+data.data.list[i].baichuan_id+'>'+
                            '<img src='+data.data.list[i].head+' />'+
                            '<div class="msg">'+
                            '<div class="msg-text">'+data.data.list[i].nickname+'</div>'+
                            '<div class="msg-time">'+data.data.list[i].time+'</div>'+

                            '</div>'+
                            '<div class="view"><a target="_blank" href="http://guannan.itboye.com/index.php/Admin/Member/view?id='+data.data.list[i].uid+'">查看</a></div>'+
                            '</div>'
                        )
                    }
                }
            });
    }
    $(function(){
        var timer = setInterval(queryUsers,5000);
        queryUsers();
    });
    $(".left_contact").click(function(ev) {
        $('.empty-container').hide();
        var touid = $(ev.target).parents('.user').data("uid");
        var openid = $(ev.target).parents('.user').data("openid");
        var toAvatar = "{:config('avatar_url')}?uid=" + touid;
        console.log($(ev.target).parents('.user'));
        console.log(touid,toAvatar);
        if($("#j_container").html().length > 0){
            WKIT.switchTouid({
                toAvatar: toAvatar,
                touid: ''+openid,
                hasPrefix: false, // 选填
                groupid: 0, // 选填
                sendMsgToCustomService: false // 选填
            });
            return ;
        }
        WKIT.init({
            toAvatar: toAvatar,
            touid: ""+openid,
            container: document.getElementById('j_container'),
            width: 700,
            height: 700,
            logo: '{$user['avatar']}',
            title: '{$user['title']}',
            avatar: '{$user['avatar']}',
            uid: '{$user['uid']}',
            appkey: 23500185,
            credential: '{$user['password']}',
            pluginUrl: '',
            autoMsg: "",
            onAudioReceived: function (content) {
                console.log(content);
                return '<audio autoplay src="' + content + '"  controls="controls"></audio>';
            }
        });
    });
</script>
</body>
</html>